<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号-注册</title>
    <link rel="stylesheet" href="../css/reg.css">
    <script src="../js/library/jquery.js"></script>
    <script>
        $(function() {
            var form = document.querySelector('form');
            var sub = document.getElementById('submit') //提交按钮;
            sub.setAttribute('disabled', 'ture');
            var inp = document.querySelectorAll('div>p>input');

            var spa = document.querySelectorAll('div>p>span');
            // console.log(spa[4]);
            var frsp = document.querySelectorAll('.frsp');
            // console.log(frsp[0]);
            var reg1 = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
            var reg2 = /^[a-zA-Z]\w{5,17}$/;

            var reg3 = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            var reg4 = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/;
            var ostyle1 = false;
            var ostyle2 = false;
            var ostyle3 = false;
            var ostyle4 = false;
            var ostyle5 = false;

            // var span = document.querySelectorAll('spa>span')
            // console.log(span)
            inp[0].onblur = function() {
                if (reg1.test(inp[0].value)) {
                    spa[0].innerHTML = '<span style="color:green">' + '√' + '</span>';
                    ostyle1 = true;
                } else {
                    frsp[0].innerHTML = '<span style="color:red">' + ' 请输入5-16位数字、字母下划线,以字母开头' + '</span>';
                    ostyle1 = false;
                }
                // console.log(ostyle1 && ostyle2 && ostyle3 && ostyle4 && ostyle5);
                check();
            };
            inp[1].onblur = function() {
                if (reg2.test(inp[1].value)) {
                    spa[1].innerHTML = '<span style="color:green">' + '√' + '</span>';
                    ostyle2 = true;
                } else {
                    frsp[1].innerHTML = '<span style="color:red">' + '只能包含有字母、数字和下划线，以字母开头' + '</span>';
                    ostyle2 = false;
                }
                // console.log(this.parentNode.lastChild.lastChild.style.color == 'green');
                check()
            };
            inp[2].onblur = function() {
                if (inp[1].value == inp[2].value && reg2.test(this.value)) {
                    spa[2].innerHTML = '<span style="color:green">√</span>';
                    ostyle3 = true;
                } else {
                    frsp[2].innerHTML = '<span style="color:red">两次密码不一致请重新输入</span>';
                    ostyle3 = false;
                }
                // console.log(ostyle1 && ostyle2 && ostyle3 && ostyle4 && ostyle5)
                // console.log(inp[1].value)
                // console.log(inp[2].value)
                check();
            };
            inp[3].onblur = function() {
                if (reg3.test(inp[3].value)) {
                    spa[3].innerHTML = '<span style="color:green">' + '√' + '</span>';
                    ostyle4 = true;
                } else {
                    frsp[3].innerHTML = '<span style="color:red">' + '邮箱格式不正确' + '</span>';
                    ostyle4 = false;
                }
                // console.log(ostyle1 && ostyle2 && ostyle3 && ostyle4 && ostyle5);
                check();
            };


            inp[4].onblur = function() {
                if (reg4.test(inp[4].value)) {
                    spa[4].innerHTML = '<span style="color:green">' + '√' + '</span>';
                    ostyle5 = true;
                } else {
                    frsp[4].innerHTML = '<span style="color:red">' + '手机号码不正确' + '</span>';
                    ostyle5 = false;
                }
                // console.log(this.parentNode.lastChild.lastChild.style.color == 'green');
                check();
            };


            function check() {
                if (ostyle1 && ostyle2 && ostyle3 && ostyle4 && ostyle5) {
                    sub.removeAttribute('disabled');
                }
            };
        });
    </script>
</head>

<body>
    <!-- 首部部分 start-->
    <div class="wrapper">
        <div class="top">
            <a href="/html/index.html" class="title"></a>
            <h4 class="top-h4">注册小米账号</h4>
            <div class="middle">
                <form action='../../interface/getreg.php'>
                    <div class="formbox">
                        <p>用户名:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="username" class="username">
                            <span></span>
                        </p>
                        <span class="frsp">
                        </span>
                    </div>
                    <div class="formbox">
                        <p>密码：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="password" name="password">
                            <span></span></p>
                        <span class="frsp"></span>
                    </div>
                    <div class="formbox">
                        <p class="frp">确认密码：<input type="text" id="password"><span></span></p>
                        <span class="frsp"></span>
                    </div>
                    <div class="formbox">
                        <p class="frp">邮箱：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="email" name="email"><span></span></p>
                        <span class="frsp"></span>
                    </div>
                    <div class="formbox">
                        <p class="frp">手机号：&nbsp&nbsp&nbsp&nbsp<input type="text" id="phone" name="phone"><span></span></p>
                        <span class="frsp"></span>
                    </div>
                    <input type="submit" value="确认提交" id='submit' />
                </form>
            </div>
        </div>
    </div>
    <div class="agreement">
        <a href="" class="agreement-a">
                已阅读并同意：小米 <span>用户协议</span>和<span>隐私政策</span>
            </a>
    </div>
    <div class="footer">
        <div class="foot-box">
            <ul class="foot-ul">
                <li><a href="#">简体</a>|</li>
                <li><a href="#">繁体</a>|</li>
                <li><a href="#">English</a>|</li>
                <li><a href="#">常见问题</a>|</li>
            </ul>
        </div>
        <p class="foot-p">
            <span>小米公司版权所有-京ICP备10046444-
                    <a href="">
                        京公网安备11010802020134号
                    </a>
                    -京ICP证110507号
                </span>

        </p>
    </div>
</body>

</html>